import React from 'react';
import store from 'store/store';
import { formatDate } from 'common/tool';
import { NavBar, DatePicker } from 'antd-mobile';

const DateChild = ({extra, onClick}) => {
  return <div onClick={onClick}>
    {extra}
  </div>
}

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedDate: new Date(),
    };
  }

  /**
   * 更改日期
   * @param {日期} date
   */
  changeSelectedDate = date => {
    const storeName = formatDate(date, 'YYYYMMDD');
    // state 更新
    this.setState({
      selectedDate: date,
    });
    // 根据日期去数据库拉取数据
    window.hornDB.getAll(storeName).then(data => {
      console.log(data);
      // 更新 redux 库
      store.dispatch({
        type: 'SET_INIT_DATA',
        name: storeName,
        data,
      });
    });
  }

  render() {
    const { selectedDate } = this.state;
    return <NavBar
      mode="light"
    >
      <DatePicker
        title="选择日期"
        value={selectedDate}
        onChange={this.changeSelectedDate}
        mode="date"
        maxDate={new Date()}
      >
        <DateChild />
      </DatePicker>
    </NavBar>
  }
}